<template>
  <div>
    <el-form-item>
      <el-button type="danger" :icon="Plus" @click="onSubmit()">新增</el-button>
      <el-button type="danger" @click="">保存</el-button>
      <el-button type="danger" @click="">撤销</el-button>
      <el-button type="danger" :icon="Delete" @click="">删除</el-button>
    </el-form-item>

    <hr style="height:3px; background-color:indianred">

    <div>
      <table class="bordered-table" width="100%" style="background-color:antiquewhite">
        <tr height="40">
          <td width="150">耳号</td>
          <td width="150">品种</td>
          <td width="150">当前栋舍</td>
          <td width="150">当前栏位</td>
          <td width="150">离场状态</td>
          <td width="150">淘汰原因</td>
          <td width="150">处理措施</td>

        </tr>
      </table>
    </div>
    <!-- 淘汰信息添加 -->
    <table class="bordered-table" width="100%" v-if="rowNum">
      <tr>
        <td width="150">
          <el-input v-model="form.eliminateEar"></el-input>
        </td>
        <td width="150">
          <el-input v-model="form.myPropertyType"></el-input>
        </td>

        <td width="150">



          <el-form-item label="" prop="eliminateRoom" >
            <el-select v-model="form.eliminateRoom" style="width: 130px" placeholder="当前栋舍">
              <el-option label="郑健义" value="郑健义" />
              <el-option label="黄峭" value="黄峭" />
              <el-option label="黄慧贤" value="黄慧贤" />
              <el-option label="王丙鑫" value="王丙鑫" />
            </el-select>
          </el-form-item>
        </td>

        <td width="150">
          <el-form-item label="" prop="eliminateStart" >
            <el-select v-model="form.eliminateStart" style="width: 130px" placeholder="当前栏位">
              <el-option label="郑健义" value="郑健义" />
              <el-option label="黄峭" value="黄峭" />
              <el-option label="黄慧贤" value="黄慧贤" />
              <el-option label="王丙鑫" value="王丙鑫" />
            </el-select>
          </el-form-item>
        </td>

        <td width="150">
          <el-input v-model="form.eliminateDel"></el-input>
        </td>
        <td width="150">
          <el-input v-model="form.eliminateWhy"></el-input>
        </td>
        <td width="150">
          <el-input v-model="form.eliminateReng"></el-input>
        </td>
      </tr>
    </table>
    <el-button type="danger" link :icon="Plus" @click="AddRow(true)">增行</el-button>
    <el-button type="danger" link @click="delRow(false)">—减行</el-button>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Plus, Delete } from "@element-plus/icons-vue";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();

const form = reactive({
  eliminateEar: '',
  myPropertyType: '',
  ablactationDay: '',
  eliminateRoom: '',
  eliminateStart: '',
  eliminateDel: '',
  eliminateWhy: '',
  eliminateReng: '',
  createdOwner: localStorage.getItem('userName')
})
//断奶添加
const onSubmit = () => {
  axios.post(apiUrl+'/api/Eliminates/addEliminate', form)
    .then(res => {
      if (res.data.code == 0) {
        console.log("淘汰信息添加", res.data);
        ElMessage.success('淘汰信息添加');
        router.push('/ShowEliminate');
        delRow();
      }
      else {
        ElMessage.error('淘汰信息添加失败');
        return;
      }
    })
}



//新增行
const rowNum = ref(false);
const AddRow = () => {
  rowNum.value = true;
};

//减行
const delRow = () => {
  rowNum.value = false;
};
</script>

<style scoped>
.bordered-table {
  border-collapse: collapse;
  /* 合并相邻单元格的边框 */
  width: 100%;
}

.bordered-table th,
.bordered-table td {
  border: 1px solid rgb(41, 41, 41);
  /* 为表头和表格单元格添加边框 */
  padding: 8px;
  /* 可选，为单元格内容添加内边距 */
  text-align: center;
  /* 可选，设置单元格内容的对齐方式 */
}

.bordered-table tr:first-child th {
  border-bottom: 2px solid black;
  /* 可选，为表头添加更粗的底部边框 */
}
</style>
